<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./js/echarts.min.js"></script>
</head>

<body>
  <div style="width:600px;height:400px;border:1px solid #ff0000;"></div>
</body>
<script>
  let dom = document.querySelector("div")
  let myChart = echarts.init(dom)

  let option = {
    xAxis: {
      type: "category",     //类目轴
      data: ["张三", "李四", "王五", "赵六"],   //类目轴显示的内容
      axisLabel: {          //x轴文字标签
        color: "red"
      },
      axisTick: {           //刻度线
        show: true,
        length: 20,
        lineStyle: {
          width: 5
        }
      }

    },
    yAxis: {
      type: "value",        //数值轴
      //y轴上的文字说明
      axisLabel: {
        show: true
      },
      //是否显示y轴线
      axisLine: {
        show: true
      },
      //grid里面的分割线
      splitLine:{
        show:true
      }
    },
    series: [
      {
        type: "bar",        //柱状图
        barWidth: 50,        //柱状图的宽度
        data: [100, 160, 200, 120],   //柱状图的数据
        barWidth: 60,
        label: {
          show: true,      //是否显示柱状图标签
          position: "top",    //标签位置
          color: "#ff0000"      //标签文字颜色
        },
        itemStyle: {
          //圆角
          borderRadius: [30, 30, 0, 0],
          //渐变色
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 1,
            y2: 1,
            colorStops: [{
              offset: 0, color: 'red' // 0% 处的颜色
            }, {
              offset: 1, color: 'blue' // 100% 处的颜色
            }],
            global: false // 缺省为 false
          }

        }
      },

    ],

  }

  myChart.setOption(option)
</script>

</html>